<template>
  <el-container style="height: 930px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1']">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-s-home"></i>租房</template>
          <el-menu-item-group>
            <el-menu-item index="1-1" @click.native="zufangshouye"><i class="el-icon-arrow-right"></i>租房首页</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">个人中心</el-menu-item>
          <el-menu-item index="3">消息中心</el-menu-item>
          <el-menu-item index="4">订单管理</el-menu-item>
          <el-dropdown @command="handleCommand">
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <i class="el-icon-user"></i>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>Hi! &nbsp;{{ username }}</span>
        </el-menu>
      </el-header>
      <el-main v-if="zufangshouyexianshi">
        <template>
          <div>
            <el-radio-group v-model="checkboxGroup1" size="mini">
              <el-radio-button v-for="city in cities" :label="city" :key="city"
                @click.native.stop="xuanzechengshi(city)">{{ city }}</el-radio-button>
            </el-radio-group>
          </div>
          <div style="margin-top: 10px">
            <el-radio-group v-model="checkboxGroup2" size="mini">
              <el-radio-button v-for="jiage in jiages" :label="jiage" :key="jiage"
                @click.native.stop="xuanzejiage(jiage)">{{ jiage }}</el-radio-button>
            </el-radio-group>
          </div>
          <div style="margin-top: 10px">
            <el-radio-group v-model="checkboxGroup3" size="mini">
              <el-radio-button v-for="jushi in jushis" :label="jushi" :key="jushi"
                @click.native.stop="xuanzejushi(jushi)">{{ jushi }}</el-radio-button>
            </el-radio-group>
          </div>
          <div style="margin-top: 10px">
            <el-input v-model="searchText" placeholder="请输入搜索内容" :style="{ width: '300px' }"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="sousuofangyuan">搜索</el-button>
          </div>
        </template>
        <el-table :data="allhouseData" @row-click="handleRowClick">
          <el-table-column prop="housename" label="房子名称" width="280">
          </el-table-column>
          <el-table-column prop="addr" label="房子地址" width="320">
          </el-table-column>
          <el-table-column prop="price" label="价格/月" width="100">
          </el-table-column>
          <el-table-column prop="bedroom" label="居室" width="85">
          </el-table-column>
          <el-table-column prop="facilityservices" label="设施服务" width="150">
          </el-table-column>
          <el-table-column label="图片" width="385">
            <template slot-scope="scope">
              <div style="display: flex;">
                <img v-for="image in scope.row.image" :key="image" :src="'http://localhost:8081/img/' + image" alt="图片"
                  style="width: 50px; height: auto; margin-right: 5px;">
              </div>
            </template>
          </el-table-column>
          <el-table-column label="联系房东" width="140">
            <template slot-scope="scope">
              <el-button type="success" icon="el-icon-message" circle @click="lianxifangdong(scope.row)"></el-button>
            </template>
          </el-table-column>

          <el-table-column label="预定" width="135">
            <template slot-scope="scope">
              <el-button type="success" icon="el-icon-check" circle @click="yuding(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!--个人中心-->
      <el-main v-if="gerenzhongxinxianshi">
        <el-row :gutter="20" align="middle">
          <el-col :span="6">用户名：</el-col>
          <el-col :span="18">
            <el-input placeholder="请输入用户名" v-model="username" clearable :style="{ width: '300px' }">
            </el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20" align="middle">
          <el-col :span="6">密码：</el-col>
          <el-col :span="18">
            <el-input placeholder="请输入密码" v-model="password" clearable :style="{ width: '300px' }">
            </el-input>
          </el-col>
        </el-row>
        <el-button type="primary">提交修改</el-button>
      </el-main>

      <!--显示订单main-->
      <el-main v-if="xianshidingdan">
        <el-input v-model="searchText" placeholder="请输入搜索内容" :style="{ width: '300px' }"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="sousuodingdan">搜索</el-button>
        <el-table :data="dingdandata">
          <el-table-column prop="housename" label="房子名称" width="285">
          </el-table-column>
          <el-table-column prop="addr" label="房子地址" width="290">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="100">
          </el-table-column>
          <el-table-column prop="bedroom" label="居室" width="85">
          </el-table-column>
          <el-table-column prop="facilityservices" label="设施服务" width="150">
          </el-table-column>
          <el-table-column label="图片" width="400">
            <template slot-scope="scope">
              <div style="display: flex;">
                <img v-for="image in scope.row.image" :key="image" :src="'http://localhost:8081/img/' + image" alt="图片"
                  style="width: 50px; height: auto; margin-right: 5px;">
              </div>
            </template>
          </el-table-column>
          <el-table-column label="评价" width="150">
            <template slot-scope="scope">
              <el-button @click="pingjia(scope.row)">评价</el-button>
            </template>
          </el-table-column>
          <el-table-column label="删除" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="shanchudingdan(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <el-dialog :visible.sync="pingjiaduihuakuang" title="新增用户编辑信息">
      <!-- 评价对话框 -->
      <el-form ref="editForm" :model="editForm">
        <el-form-item label="星级">
          <el-input v-model="editForm.star"></el-input>
        </el-form-item>
        <el-form-item label="评价">
          <el-input v-model="editForm.evaluate"></el-input>
        </el-form-item>
      </el-form>
      <!-- 评价对话框 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="pingjiaduihuakuang = false">取消</el-button>
        <el-button type="primary" @click="quedingpingjia">确定</el-button>
      </span>
    </el-dialog>

  </el-container>
  
</template>
<style>
.el-header {
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
<script>
import axios from 'axios';
export default {

  mounted() {

    this.id = this.$route.params.id
    axios.get('http://localhost:8081/dlzc/idfindusername/' + this.id)
      .then(response => {
        console.log('响应数据：', response.data);

        if (typeof response.data === 'string') {
          this.username = response.data;
        } else {
          console.error('返回的数据不是字符串');
        }
      })
      .catch(error => {
        console.error('发生错误：', error);
      });

    this.zufangshouye()

  },
  data() {
    const chenshi = ['全部', '北京', '上海', '广州', '深圳', '成都', '重庆', '杭州', '西安', '武汉', '苏州', '郑州', '南京', '天津', '长沙', '东莞', '宁波', '佛山', '合肥', '青岛', '柳州', '南宁', '桂林', '贵港', '河池', '百色'];
    const jiage = ['全部', '100以下', '100-200', '200-300', '300-400', '400-500', '500-600', '600-700', '700-800', '800-900', '900-1000', '1000-1100', '1100-1200', '1200-1300', '1300-1400', '1400-1500', '1500以上'];
    const jushi = ['全部', '一居', '二居', '三居', '四居', '五居室及以上'];
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(10).fill(item),
      gerenzhongxinxianshi: false,
      xianshidingdan: false,
      username: '',
      activeIndex: '1',
      activeIndex2: '1',
      username: '崔崔崔',
      password:'',
      checkboxGroup1: '全部',
      pingjiaduihuakuang: false,
      editForm: {
        id: '',
        userid: '',
        merchantid: '',
        star: '',
        evaluate: '',
      },
      checkboxGroup2: '全部',
      checkboxGroup3: '全部',
      cities: chenshi,
      jiages: jiage,
      jushis: jushi,
      searchText: '',
      searchText: '',
      zufangshouyexianshi: false,
      allhouseData: [],
      dingdandata: [],
      id: '',
      tiaojianliebiao: {
        addr: '',
        price: '',
        bedroom: '',
      }
    }
  },
  methods: {
    pingjia(row){
      this.pingjiaduihuakuang=true
      this.editForm.userid = this.id
      this.editForm.merchantid = row.id
    },
    quedingpingjia(){
      axios.get('http://localhost:8081/evaluate/userevaluate/' + this.editForm.userid+'/'+this.editForm.merchantid+'/'+this.editForm.star+'/'+this.editForm.evaluate)
        .then(response => {          
          if (response.data === true) {
            this.$notify({
            title: '成功',
            message: '评价成功',
            type: 'success'
          });
          } else {
            alert("评价失败!")
          }
        })
        .catch(error => {
          console.error('发生错误：', error);
        });

      this.pingjiaduihuakuang=false
    },
    shanchudingdan(row){
      axios.get('http://localhost:8081/order/deleteuserorder/' + this.id+'/'+ row.id)
        .then(response => {          
          if (response.data === true) {
            this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
          this.dingdanguanli()
          } else {
            alert("删除失败!")
          }
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    handleRowClick(row) {
      // 获取所需的 ID
      const houseId = row.id; // 假设 ID 存在于数据中的 id 属性
      // 使用路由进行页面跳转并传递 ID
      //this.$router.push({ name: 'housepage', params: { id: houseId } });

      this.$router.push({
        name: 'housepage',
        params: {
          houseId: houseId,
          userid: this.id,
        }
      });


    },
    handleSelect(key, keyPath) {
      if (key === '4') {
        this.dingdanguanli();
      }
      if (key === '1') {
        this.gerenzhongxin();
      }
    },

    handleCommand(command) {
      if (command === 'logout') {
        this.tuichudenglu();
      }
    },
    tuichudenglu() {
      window.location.reload()
    },
    gerenzhongxin() {
      this.zufangshouyexianshi = false
      this.xianshidingdan = false
      this.gerenzhongxinxianshi = true

    },
    dingdanguanli() {
      this.zufangshouyexianshi = false
      this.xianshidingdan = true
      this.gerenzhongxinxianshi = false
      axios.get('http://localhost:8081/order/finduserorder/' + this.id)
        .then(response => {
          console.log('响应数据：', response.data);
          this.dingdandata = response.data.map(house => ({
            id: house.id,
            housename: house.housename,
            addr: house.addr,
            price: house.price,
            bedroom: house.bedroom,
            facilityservices: house.facilityservices,
            image: (house.image.split(',')).map(url => url + '.jpg'),
          }));
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    zufangshouye() {
      this.zufangshouyexianshi = true
      this.gerenzhongxinxianshi = false
      this.xianshidingdan = false
      axios.get('http://localhost:8081/house/findallhouse')
        .then(response => {
          console.log('响应数据：', response.data);
          this.allhouseData = response.data.map(house => ({
            id: house.id,
            housename: house.housename,
            addr: house.addr,
            price: house.price,
            bedroom: house.bedroom,
            facilityservices: house.facilityservices,
            image: (house.image.split(',')).map(url => url + '.jpg'),
          }));
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    sousuofangyuan() {
      this.tiaojianliebiao.addr = this.checkboxGroup1;
      this.tiaojianliebiao.price = this.checkboxGroup2;
      this.tiaojianliebiao.bedroom = this.checkboxGroup3;
      if (this.searchText != '') {

      } else {
        this.searchText = "全部"
      }
      if (this.tiaojianliebiao.length === 0) {
        this.zufangshouye()
      } else {
        axios.get('http://localhost:8081/client/findhouse/' + this.tiaojianliebiao.addr + '/' + this.tiaojianliebiao.price + '/' + this.tiaojianliebiao.bedroom + '/' + this.searchText)
          .then(response => {
            console.log('响应数据：', response.data);
            this.allhouseData = response.data.map(house => ({
              id: house.id,
              housename: house.housename,
              addr: house.addr,
              price: house.price,
              bedroom: house.bedroom,
              facilityservices: house.facilityservices,
              image: (house.image.split(',')).map(url => url + '.jpg'),
            }));
          })
          .catch(error => {
            console.error('发生错误：', error);
          });
      }
    },
    xuanzechengshi(city) {
      this.checkboxGroup1 = city
      this.sousuofangyuan()
    },
    xuanzejiage(jiage) {
      this.checkboxGroup2 = jiage
      this.sousuofangyuan()
    },
    xuanzejushi(jushi) {
      this.checkboxGroup3 = jushi
      this.sousuofangyuan()
    },

  },
};
</script>